<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div.translate {
            width: 300px;
            height: 100px;
            background-color: yellow;
            border: 1px solid black;
            transition: transform 1s;
        }

        div.translate:hover {
            transform: translate(50px, 100px);
        }
        /* ---------------------------- */
        div.rotate {
            width: 300px;
            height: 100px;
            background-color: yellow;
            border: 1px solid black;
            transition: transform 2.0s;
        }

        div.rotate:hover {
            transform: rotate(1080deg);
        }
        /* ----------------------------------- */
        div.scale {
            width: 300px;
            height: 100px;
            background-color: yellow;
            border: 1px solid black;
            transition: transform 1.0s;
        }

        div.scale:hover {
            transform: scale(2, 3);
        }

    </style>
</head>
<body>
<h3>The translate() Method</h3>
<p>The translate() method moves an element from its current position:</p>
<div class="translate">
    <p>This div element is moved 50 pixels to the right, and 100 pixels down from its current position.</p>
</div>
<hr>
<h3>The rotate() Method</h3>
<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>
<div class="rotate">
    This div element is rotated clockwise 1080 degrees.
</div>
<hr>
<h3>The scale() Method</h3>
<p>The scale() method increases or decreases the size of an element (according to the parameters given for the width and
    height).</p>
<div class="scale">
    This div element is two times of its original width, and three times of its original height.
</div>
</body>
</html>